
<pagination-template #p="paginationApi"
                     [id]="config.id"
                     (pageChange)="config.currentPage = $event">


    <div class="custom-pagination">
        <div class="pagination-previous" [class.disabled]="p.isFirstPage()">
            <a *ngIf="!p.isFirstPage()" (click)="p.previous()"> < </a>
        </div>

        <div *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
            <a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
                <span>{{ page.label }}</span>
            </a>
            <div *ngIf="p.getCurrent() === page.value">
                <span>{{ page.label }}</span>
            </div>
        </div>

        <div class="pagination-next" [class.disabled]="p.isLastPage()">
            <a *ngIf="!p.isLastPage()" (click)="p.next()"> > </a>
        </div>
    </div>

</pagination-template>

<ul class="meal-list">
    <li *ngFor="let meal of meals | paginate: config">
        {{ meal }}
    </li>
</ul>
